<template>
  <!-- 逛水果店 -->
  <div class="main">
    <table>
      <td>
        <tr>
          <h3>欢迎光临vue开发的收银系统水果店</h3>
        </tr>
        <tr>
          <div>
            苹果 <span>{{ price }}</span> ￥/斤，折扣 <span>{{ discount }}</span
            >折
          </div>
        </tr>
        <tr>
          <div>
            请输入你要购买的斤数
            <input type="text" v-model="num" />
          </div>
        </tr>
        <tr>
          <button @click="total">结账买单~</button>
        </tr>
        <tr>
          <div>
            结账单：总价：<span>{{ totalPrice }}</span
            >￥元 折后价：<span>{{ discountPrice }}</span
            >￥元省了： <span>{{ save }}</span
            >￥元
          </div>
        </tr>
      </td>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      discount: 8,
      price: 10,
      num: "",
      totalPrice: 0,
      discountPrice: 0,
      save: 0,
    };
  },
  methods: {
    total() {
      this.totalPrice = this.num * this.price;
      this.discountPrice = (this.totalPrice * this.discount) / 10;
      this.save = this.totalPrice - this.discountPrice;
    },
  },
};
</script>

<style>
.main {
  width: 500px;
  margin: 0 auto;
}
table {
  text-align: center;
}
</style>